<template>
  <div id="main"></div>
</template>

<script>
import * as zrender from "zrender";
import AnimatePlayer from './animationPlayer'
export default {
    mounted(){
        window.zrender = zrender
        this.zr = zrender.init(document.getElementById("main"));
        this.AnimatePlayer = new AnimatePlayer();

        this.circle = new zrender.Rect({
            shape: {
                x: 100,
                y: 100,
                width: 200,
                height: 200,
                r: [10,10,0,0],
            },
            style:{
                stroke:  '#f00',
                fill: '#ccc'
            }
        })
        this.zr.add(this.circle)

        
        window.zhq = this;

        // 测试group的position
        this.AnimatePlayer.add('圆形平移', this.circle, {
            shape: {
                x: [100, 200],
                y: [100, 400],
            },
            style:{
                lineWidth: [1,5],
                fill: ['#ccc', '#0ff']
            }
        }, 300, 1000, 'elasticOut')


        let g = new zrender.Group();
        g.setPosition([200,100])
        this.zr.add(g)
        let circle = new zrender.Circle({
            shape:{
                cx: 0,
                cy: 0,
                r: 50,
            },
            style:{
                stroke: '#00f',
                fill: 'none'
            }
        })
        g.add(circle)
        window.circle = circle
        let text = new zrender.Text({
            style:{
                x: 0,
                y: 0,
                text: '0',
                align: 'center',
                verticalAlign: 'center'
            }
        })
        g.add(text)

        let polygon = new zrender.Polygon({
            x: 500,
            y: 400,
            shape:{
                points: [
                    [0,0],
                    [100,-20],
                    [100,-120],
                    [0,-100],
                ]
            },
            style:{
                fill: new zrender.LinearGradient(0.1,0.1,0.05,1,[
                    {offset: 0, color: '#fff'},
                    {offset: 1, color: '#f00'},
                ]),
                stroke: '#333'
            }
        })
        this.zr.add(polygon)

        this.AnimatePlayer.add('polygon', polygon, {
            shape:{
                points: [
                    [
                        [0,0],
                        [100,-20],
                        [100,-120],
                        [0,-100],
                    ],[
                        [0,0],
                        [100,-20],
                        [100,-220],
                        [0,-200],
                    ],
                ]
            }
        }, 0, 1000)

        this.AnimatePlayer.add('g', g, {
            position:[[200,100], [300,100]]
        }, 1000, 2000, 'elasticOut')

        this.AnimatePlayer.add('g2', g, {
            position:[[300,100], [500,100]]
        }, 3000, 4000, 'elasticOut')

        this.AnimatePlayer.add('text', text, {
            style:{
                text: [0, 100, d=>d.toFixed(2)]
            }
        }, 1000, 2000)


        var now = 0;
        var clock = setInterval(() => {
            now += 17;
            this.AnimatePlayer.seek(now)
            if(now > 5000) clearInterval(clock);
        }, 17);
        // this.AnimatePlayer.seek(1650)
    }
}
</script>

<style scoped>
#main {
  width: 80vw;
  height: 90vh;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>